Lynda - Creating a Responsive Website Design

سپیدارخبر: امروزه کاربران، وبسایت‌ها را در انواع مختلفی از صفحه‌نمایش‌ها -از کامپیوترهای ثابت گرفته تا تبلت‌ها و موبایل‌ها با اندازه نمایش‌گرهای گوناگون- مشاهده می‌کنند؛ بنابراین لازم است اصولی رعایت گردند که جایگیری صفحات وب و محتوای کلی آنها در صفحه‌نمایش‌های مختلف با اِشکال مواجه نشود. این دوره‌ی آموزشی تصویری، کاربران را با اصول طراحی و ساخت وبسایت واکنش‌گرا (Responsive) با رویکرد نمایشِ بهینه و بدون مشکل صفحات آن در تمامی صفحه‌نمایش‌های رایج در دستگاه‌های گوناگون آشنا می‌کند. مهارت‌ها و تکنیک‌های تدریس شده در این دوره دارای سطح مبتدی بوده و از آغاز تا پایان روند ساخت سایت واکنش‌گرا را پوشش داده است. مهارت‌هایی که شامل استفاده از فتوشاپ برای خلق ایده‌های تصویری همچنین استفاده از HTML و CSS برای پیش‌بُرد اهداف موردنظر به همراه بسیاری موارد مهم دیگر هستند.

 

محتوای آموزش:

1- آشنایی با سخت‌افزارهای موردنیاز

2- طرح‌بندی

3- اضافه کردن مضامین، محتوا و لینک‌ها

4- ایجاد و برش بنرهای چنداندازه در فتوشاپ

5- لینک کردن به فایل‌های CSS با مدیا کوئری

6- تنظیم مقیاس دید

7- موارد مهم مربوط به سرفصل، متن و پاورقی

8- اقدامات مربوط به Navigation Links

9- مبادله گرافیک‌های وضوح بالا برای صفحه‌نمایش‌های Retina

 

تولید کننده: Lynda.com

تاریخ انتشار: 04-10-2012 آپدیت شده در تاریخ 18-02-2015

سطح: مبتدی

مدت زمان آموزش: 2 ساعت و 20 دقیقه

مدرس: Chris Converse

 

فهرست کامل سرفصل‌ها و عناوین آموزش (به همراه زمان دقیق آنها) :

Introduction - 7m 39s

Previewing the final project - 4m 0s

About the exercise files - 1m 15s

Exploring the software you'll need to complete this course - 49s

Beginning your project - 1m 35s

 

1. For Those Using Dreamweaver - 3m 45s

What to expect with Design view in Dreamweaver - 2m 1s

Accessing code for HTML and CSS in Dreamweaver - 1m 44s

 

2. Setting Up Your Project - 9m 19s

Planning your layout - 2m 47s

Adding the main HTML containers - 1m 47s

Adding the promo containers - 31s

Adding links and the copyright - 1m 47s

Adding sample content into the HTML containers - 2m 27s

 

3. Creating Web Graphics - 8m 37s

Creating and slicing multiple-sized banner images - 5m 53s

Exporting content and template artwork - 2m 44s

 

4. Preparing the HTML File - 7m 27s

Linking CSS files for all screen sizes - 1m 42s

Linking CSS files based on screen size with media queries - 2m 13s

Enabling Internet Explorer 7 and 8 to understand HTML5 - 1m 25s

Setting the viewport scale - 2m 7s

 

5. Creating CSS Rules Across All Screens - 9m 0s

Adding the background pattern and the page container color - 3m 43s

Styling the headings - 2m 17s

Styling the body text and the links - 1m 15s

Styling the footer - 1m 45s

 

6. Preparing the HTML File - 9m 49s

Understanding compound rules - 2m 58s

Styling the promo links with a CSS sprite - 2m 48s

Styling the promo text - 1m 26s

Adding the promo images with CSS - 2m 37s

 

7. Creating the Content and the Layout Containers - 7m 46s

Adding CSS rules for layout - 2m 8s

Styling the header on large screens - 2m 34s

Styling the article on large screens - 3m 4s

 

8. Styling the Promos - 6m 29s

Styling the navigation links - 2m 1s

Styling the navigation for large screens - 1m 16s

Positioning the navigation for large screens - 1m 37s

Clearing the float for the promos - 1m 35s

 

9. Working with CSS Rules - 2m 47s

Adding CSS rules with inline media queries - 2m 47s

 

10. Styling for Medium Screens - 6m 0s

Styling the header for medium screens - 2m 32s

Styling the navigation for medium screens - 1m 10s

Styling the promos for medium screens - 2m 18s

 

11. Styling for Small Screens - 12m 7s

Styling the header for small screens - 2m 27s

Styling the navigation for small screens - 1m 12s

Styling the navigation links for small screens - 4m 13s

Styling the promos for small screens - 2m 57s

Styling the footer for small screens - 1m 18s

 

12. Supporting High-Definition (Retina) Screens - 13m 12s

Additional exercise files for this chapter - 1m 4s

Creating double-sized graphics for high-definition screens - 4m 45s

Replacing the promo graphics with CSS media queries - 2m 42s

Replacing the logo and banner graphics with CSS media queries - 4m 41s

 

13. Creating Markup and Styles for Print - 35m 46s

Additional exercise files for this chapter NEW - 1m 7s

Creating graphics optimized for printing NEW - 3m 35s

Including additional content for printed pages NEW - 2m 0s

Creating print-friendly CSS rules NEW - 5m 14s

Revealing hyperlink URLs for a printed page NEW - 4m 28s

Redefining the promo and footer styles NEW - 2m 19s

Background images vs. image tags NEW - 1m 52s

Image option one: Using background images NEW - 5m 15s

Image option two: Adding image tags NEW - 6m 44s

Adding CSS page breaks NEW - 3m 12s

 

Conclusion - 57s

Where to go from here - 57s

 

 

نکات:

1- این آموزش به زبان انگلیسی است.

2- آموزش به صورت فیلمهای جداگانه برای هر فصل است.

3- فرمت فایلها MP4 است.

4- فایل های دانلودی قابلیت تعمیر با WinRAR  در صورت دانلود ناقص را دارا می باشند.